﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat</title>
</head>
<body>
    <canvas id="dateCanvas" width="1200" height="800" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvasDate = document.getElementById("dateCanvas"); //绘图区域
        canvasDate.width = window.innerWidth;
        canvasDate.height = window.innerHeight;
        let paintDate = new FCPaint(); //绘图对象
        paintDate.canvas = canvasDate;
        scaleCanvas(paintDate);
        //判断主题
        paintDate.defaultUIStyle = "dark";
        let url = location.href;
        if (url.indexOf("color=light") != -1) {
            paintDate.defaultUIStyle = "light";
        }
        //判断是否移动端
        paintDate.isMobile = isMobileMode();
        if (paintDate.isMobile) {
            paintDate.scaleFactorX = 2.5;
            paintDate.scaleFactorY = 2.5;
        }
        /*
        * 绘制日的按钮
        * dayButton:日期按钮
        * paint:绘图对象
        */
        paintDate.onPaintCalendarDayButton = function (dayButton, paint) {
            if (dayButton.day) {
                let calendar = dayButton.calendar;
                let bounds = dayButton.bounds;
                let text = dayButton.day.day;
                let tSize = paint.textSize(text, dayButton.font);
                if (dayButton.backColor) {
                    paint.fillRect(dayButton.backColor, bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
                }
                if (dayButton.inThisMonth) {
                    paint.drawText(text, dayButton.textColor, dayButton.font, bounds.left + 5, bounds.top + 7);
                } else {
                    paint.drawText(text, dayButton.textColor2, dayButton.font, bounds.left + 5, bounds.top + 7);
                }
                if (dayButton.borderColor) {
                    paint.drawRect(dayButton.borderColor, 1, 0, bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
                }
            }
        };

        /*
        * 绘制月的按钮
        * monthButton:月按钮
        * paint:绘图对象
        */
        paintDate.onPaintCalendarMonthButton = function (monthButton, paint) {
            let calendar = monthButton.calendar;
            let bounds = monthButton.bounds;
            let text = getMonthStr(monthButton.month);
            let tSize = paint.textSize(text, monthButton.font);
            if (monthButton.backColor) {
                paint.fillRect(monthButton.backColor, bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
            }
            paint.drawText(text, monthButton.textColor, monthButton.font, bounds.left + 5, bounds.top + 7);
            if (monthButton.borderColor) {
                paint.drawRect(monthButton.borderColor, 1, 0, bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
            }
        };

        /*
        * 绘制年的按钮
        * yearButton:年按钮
        * paint:绘图对象
        */
        paintDate.onPaintCalendarYearButton = function (yearButton, paint) {
            let calendar = yearButton.calendar;
            let bounds = yearButton.bounds;
            let text = yearButton.year;
            let tSize = paint.textSize(text, yearButton.font);
            if (yearButton.backColor) {
                paint.fillRect(yearButton.backColor, bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
            }
            paint.drawText(text, yearButton.textColor, yearButton.font, bounds.left + 5, bounds.top + 7);
            if (yearButton.borderColor) {
                paint.drawRect(yearButton.borderColor, 1, 0, bounds.left + 2, bounds.top + 2, bounds.right - 2, bounds.bottom - 2);
            }
        };

        //创建日历
        let calendar = new FCCalendar();
        calendar.dock = "fill";
        addView(calendar, paintDate);
        calendar.borderColor = null;
        calendar.textColor = null;
        calendar.visible = true;
        calendar.useAnimation = true;
        initCalendar(calendar);
        calendar.selectedDay = getYear(calendar.years, 2022).months.get(10).days.get(1);
        updateCalendar(calendar);
        if (calendar.paint.defaultUIStyle == "dark") {
            calendar.backColor = "rgb(0,0,0)";
            calendar.headDiv.backColor = "rgb(0,0,0)";
            calendar.headDiv.textColor = "rgb(255,255,255)";
            let dayButtonsSize = calendar.dayDiv.dayButtons.length;
            for (let i = 0; i < dayButtonsSize; i++) {
                let dayButton = calendar.dayDiv.dayButtons[i];
                let dayButton_am = calendar.dayDiv.dayButtons[i];
                dayButton.textColor2 = "rgb(200,200,200)";
                dayButton.textColor = "rgb(255,255,255)";
                dayButton.borderColor = "rgb(100,100,100)";
                dayButton_am.textColor2 = "rgb(200,200,200)";
                dayButton_am.textColor = "rgb(255,255,255)";
                dayButton_am.borderColor = "rgb(100,100,100)";
            }
            let monthButtonsSize = calendar.monthDiv.monthButtons.length;
            for (let i = 0; i < monthButtonsSize; i++) {
                let monthButton = calendar.monthDiv.monthButtons[i];
                let monthButton_am = calendar.monthDiv.monthButtons[i];
                monthButton.textColor = "rgb(255,255,255)";
                monthButton.borderColor = "rgb(100,100,100)";
                monthButton_am.textColor = "rgb(255,255,255)";
                monthButton_am.borderColor = "rgb(100,100,100)";
            }
            let yearButtonsSize = calendar.yearDiv.yearButtons.length;
            for (let i = 0; i < yearButtonsSize; i++) {
                let yearButton = calendar.yearDiv.yearButtons[i];
                let yearButton_am = calendar.yearDiv.yearButtons[i];
                yearButton.textColor = "rgb(255,255,255)";
                yearButton.borderColor = "rgb(100,100,100)";
                yearButton.textColor = "rgb(255,255,255)";
                yearButton.borderColor = "rgb(100,100,100)";
            }
        } else if (calendar.paint.defaultUIStyle == "light") {
            calendar.backColor = "rgb(255,255,255)";
            calendar.headDiv.backColor = "rgb(255,255,255)";
            calendar.headDiv.textColor = "rgb(0,0,0)";
            let dayButtonsSize = calendar.dayDiv.dayButtons.length;
            for (let i = 0; i < dayButtonsSize; i++) {
                let dayButton = calendar.dayDiv.dayButtons[i];
                let dayButton_am = calendar.dayDiv.dayButtons[i];
                dayButton.textColor2 = "rgb(50,50,50)";
                dayButton.textColor = "rgb(0,0,0)";
                dayButton.borderColor = "rgb(150,150,150)";
                dayButton_am.textColor2 = "rgb(50,50,50)";
                dayButton_am.textColor = "rgb(0,0,0)";
                dayButton_am.borderColor = "rgb(150,150,150)";
            }
            let monthButtonsSize = calendar.monthDiv.monthButtons.length;
            for (let i = 0; i < monthButtonsSize; i++) {
                let monthButton = calendar.monthDiv.monthButtons[i];
                let monthButton_am = calendar.monthDiv.monthButtons[i];
                monthButton.textColor = "rgb(0,0,0)";
                monthButton.borderColor = "rgb(150,150,150)";
                monthButton_am.textColor = "rgb(0,0,0)";
                monthButton_am.borderColor = "rgb(150,150,150)";
            }
            let yearButtonsSize = calendar.yearDiv.yearButtons.length;
            for (let i = 0; i < yearButtonsSize; i++) {
                let yearButton = calendar.yearDiv.yearButtons[i];
                let yearButton_am = calendar.yearDiv.yearButtons[i];
                yearButton.textColor = "rgb(0,0,0)";
                yearButton.borderColor = "rgb(150,150,150)";
                yearButton_am.textColor = "rgb(0,0,0)";
                yearButton_am.borderColor = "rgb(150,150,150)";
            }
        }

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_Date = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown_Date = function (view, mp, buttons, clicks, delta) {
            onMouseDownDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_Date = function (view, mp, buttons, clicks, delta) {
            onMouseMoveDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_Date = function (view, mp, buttons, clicks, delta) {
            if (window.event.ctrlKey && view.paint) {
                //放大显示
                if (delta < 0) {
                    view.paint.scaleFactorX = view.paint.scaleFactorX + 0.1;
                    view.paint.scaleFactorY = view.paint.scaleFactorY + 0.1;
                    resizeAll();
                    //缩小显示
                } else if (delta > 0) {
                    if (view.paint.scaleFactorX > 0.2) {
                        view.paint.scaleFactorX = view.paint.scaleFactorX - 0.1;
                        view.paint.scaleFactorY = view.paint.scaleFactorY - 0.1;
                        resizeAll();
                    }
                }
                return;
            }
            onMouseWheelDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_Date = function (view, mp, buttons, clicks, delta) {
            onMouseUpDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin_Date = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchBeginDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintDate.onPaint = function (view, paint, clipRect) {
            onPaintDefault(view, paint, clipRect);
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintDate.onPaintBorder = function (view, paint, clipRect) {
            onPaintBorderDefault(view, paint, clipRect);
        };

        /*
         * 更新布局的实现方法
         * views:视图集合
         */
        paintDate.onUpdateView = function (views) {
            updateViewDefault(views);
        }

        /*
         * 重置大小
         */
        let resizeAll = function () {
            canvasDate.width = document.documentElement.clientWidth;
            canvasDate.height = document.documentElement.clientHeight;
            scaleCanvas(paintDate);
            updateViewDefault(paintDate.views);
            invalidate(paintDate);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };

        //注册事件
        addMouseDownEvent(canvasDate, paintDate, onMouseDown_Date);
        addTouchBeginEvent(canvasDate, paintDate, onTouchBegin_Date);
        addMouseMoveEvent(canvasDate, paintDate, onMouseMove_Date);
        addMouseWheelEvent(canvasDate, paintDate, onMouseWheel_Date);
        addMouseUpEvent(canvasDate, paintDate, onMouseUp_Date, onClick_Date);

        /*
        * 日历的滚动秒表
        */
        let checkCalendar = function () {
            calendarTimer(calendar);
        };

        //启动秒表
        setInterval(checkCalendar, 50);
        updateViewDefault(paintDate.views);
        //刷新界面
        invalidate(paintDate);
    </script>
</body>
</html>
